<template>
  <div>
    <!-- 面包屑导航区域-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home/users' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  卡片区域-->
    <el-card>
      <el-tag type="warning">
        <i class=" el-icon-warning"></i>
        <span>注意:允许为第三级分类设置相关参数</span>
      </el-tag>
      <el-form ref="paramsFormRef" :model="paramsForm">
        <el-form-item label="选择商品分类"  >
          <el-cascader
              v-model="selected"
              :options="cateList"
              :props="cateProps"
              @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <!--    el-tabs标签页-->
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="动态参数" name="many"  >
          <el-button type="primary" size="mini"  :disabled="selected.length !== 3" >添加参数</el-button>
          <el-table :data="activeName === 'many'?paramsData:onlyData" style="width: 80%" stripe highlight-current-row border empty-text="请选择商品分类">
            <el-table-column  type="expand" width="50px" >
            </el-table-column>
            <el-table-column label="#"  align="center" type="index">
            </el-table-column>
            <el-table-column label="参数名称" align="center" prop="attr_name">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete"  size="mini" >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button type="primary" size="mini" :disabled="selected.length !== 3">添加属性</el-button>
          <el-table :data="activeName === 'many'?paramsData:onlyData" style="width: 80%" stripe highlight-current-row border empty-text="请选择商品分类">
            <el-table-column  type="expand" width="50px" >
            </el-table-column>
            <el-table-column label="#"  align="center" type="index">
            </el-table-column>
            <el-table-column label="参数名称" align="center" prop="attr_name">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete"  size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {request} from "../../../network/axios";
import {ElMessage} from "element-plus";

export default {
  name: "params",
  created() {
    this.getCateData()
  },
  data(){
    return{
      //级联选择框的配置对象，里面必须有value,label,children
      cateProps:{
        value:'cat_id',
        label:'cat_name',
        children:'children'
      },
      cateList:[],
      paramsForm:{
      },
      selected:[],
      //被激活标签页的名称
      activeName:'many',
      paramsData:[],
      onlyData:[],
      attrId:''
    }
  },
  methods: {
    //获取三级参数列表
    getCateData() {
      request({
        url: `categories`,
        method: 'get',
      }).then(res => {
        this.cateList = res.data.data
        console.log(res);
      })
    },
    //级联选择框选中项改变事件
    handleChange() {
      this.getData()
    },
    //获取参数列表
    getData() {
      if (this.selected.length !== 3) {
        ElMessage.warning("请选择三级标签")
        return this.selected = []
      }
      console.log(this.selected)
      console.log(this.activeName)
      request({
        url: `categories/${this.cateId}/attributes/${this.attrId}`,
        method: 'get',
        params: {
          id: this.cateId,
          sel: this.activeName
        }
      }).then(res => {
        if (this.activeName === 'many') {
          console.log(res);
          this.paramsData = res.data.data
        } else {
          console.log(res);
          this.onlyData = res.data.data
        }

      })
    },
    //tab页标签点击事件
    handleTabClick() {
      this.getData()
    },

  },
  computed: {
    //获取三级分类的id
    cateId() {
      if (this.selected.length === 3) {
        return this.selected[2]
      }
      return null
    }
  },
}
</script>

<style scoped src="../../../assets/css/goods/params.css">

</style>